<template>
  <div id="map">
  </div>
  <div class="map-overlay" id="features">
    <h2>美国人口密度可视化统计</h2>
    <div id="pd"><p>
      Hover over a state!
    </p></div>
  </div>
  <div class="map-overlay" id="legend"></div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import {onMounted, reactive} from "vue";
const layers = [
  '0-10',
  '10-20',
  '20-50',
  '50-100',
  '100-200',
  '200-500',
  '500-1000',
  '1000+'
];
const colors = [
  '#FFEDA0',
  '#FED976',
  '#FEB24C',
  '#FD8D3C',
  '#FC4E2A',
  '#E31A1C',
  '#BD0026',
  '#800026'
];

let map;
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'

  // init map
  const map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapboxdevuser520/cls2ud6ib00ch01r9ajvzgw7v' // replace this with your style URL
  });
  map.addControl(new mapboxgl.ScaleControl());
  // Mapbox汉化处理
  map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
  }));

  map.on('load', () => {
    // make a pointer cursor
    map.getCanvas().style.cursor = 'default';
    // set map bounds to the continental us
    map.fitBounds([
      [-133.2421875, 16.972741], // south | western  - 南西
      [-47.63671875, 52.696361], // north | eastern  - 北东
    ])

    // create legend
    const legend = document.getElementById('legend');
    layers.forEach((layer, i) => {
      const color = colors[i];
      const item = document.createElement('div');
      const key = document.createElement('span');
      key.className = 'legend-key';
      key.style.backgroundColor = color;

      const value = document.createElement('span');
      value.innerHTML = `${layer}`;
      item.appendChild(key);
      item.appendChild(value);
      legend.appendChild(item);
    })

    /*
    * queryRenderedFeatures(geometry?, options?);
    * 用来查询特征元素根据指定的范围
    * Returns an array of GeoJSON Feature objects
    * */
    // change info window on hover
    map.on('mousemove', (event) => {
      const states = map.queryRenderedFeatures(event.point, )
      document.getElementById('pd').innerHTML = states.length
                ?  `<h3>${states[0].properties.name}</h3><p><strong><em>${states[0].properties.density}</strong> people per square mile</em></p>`
        : `<p>Hover over a state!</p>`;
    })
  })
})
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

p {
  margin: 10px;
}

.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 250px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  line-height: 18px;
  height: 150px;
  margin-bottom: 40px;
  width: 100px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
</style>


<!--

地图对象可以监听浏览器地图状态更改发生的某些事件
eg: load事件
当样式加载到地图上时会发出该事件，通过map.on方法，将其余代码放置在事件发生时调用的回调函数中
确保在该事件发生之前不会执行其余代码
map.on('load', () => {
  // the reset of code will go in there after map loaded.
});
-->
